import React from 'react';
import { toJS } from 'mobx';
import { inject, observer } from 'mobx-react';
import { WeaLocaleProvider } from 'ecCom';

import { WeaMenu } from 'weaPortalPublic';

import E8LeftMenuTop from './E8LeftMenuTop';
import E8LeftMenuBottom from './E8LeftMenuBottom';

const getLabel = WeaLocaleProvider.getLabel;

@inject('portalThemeStore')
@observer
class E8LeftMenu extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
    this.onModeChange = this.onModeChange.bind(this);
  }

  newheight = () => {
    let asdh = $('.e8aside-container').height() - $('.e8aside-container .e8left-lmt').height() - $('.e8aside-container .e8left-lmb').height();
    $('.e8aside-container #menuScrollWrapper').css({ height: asdh });
  };

  componentDidMount() {
    window.addEventListener('resize', this.newheight);
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.newheight);
  }

  componentDidUpdate() {
    const { portalThemeStore } = this.props;
    portalThemeStore.onLoadLeftMenuCount();
  }

  render() {
    const { portalThemeStore } = this.props;
    const { themeInfo = {}, leftMenuObj, leftMenuMode, translatepage } = portalThemeStore;

    const { themeData = {} } = themeInfo;
    const { leftcolor } = themeData;

    const { leftMenu = [], leftMenuSelected = {}, leftMenuType } = leftMenuObj;
    let _leftMenu = toJS(leftMenu);
    let _leftMenuSelected = toJS(leftMenuSelected);
    let _selectedKey = _leftMenuSelected.id;

    return (
      <div className="e8aside-container" style={leftcolor ? { backgroundColor: leftcolor } : {}}>
        <div style={{ width: '225px', height: '100%', display: leftMenuMode == 'inline' ? 'block' : 'none' }}>
          <WeaMenu
            ecId={`${(this && this.props && this.props.ecId) || ''}_WeaMenu@g0wp99`}
            mode={leftMenuMode}
            needSwitch={false}
            inlineWidth={225}
            verticalWidth={0}
            datas={leftMenuType == 'email' && leftMenuMode == 'inline' ? _leftMenu.slice(2) : _leftMenu}
            defaultSelectedKey={_selectedKey}
            onSelect={this.onSelect}
            onModeChange={this.onModeChange}
            addonBefore={
              <E8LeftMenuTop
                ecId={`${(this && this.props && this.props.ecId) || ''}_E8LeftMenuTop@4gjuw5`}
                emailMenu={leftMenuType == 'email' ? _leftMenu : []}
                onSelect={this.onSelect}
              />
            }
            addonBeforeHeight={leftMenuType == 'email' ? 115 : 80}
            addonAfter={<E8LeftMenuBottom ecId={`${(this && this.props && this.props.ecId) || ''}_E8LeftMenuBottom@cbnkbb`} />}
            addonAfterHeight={48}
            translatepageheight={translatepage == '1' ? 30 : 0}
          />
        </div>
        <div
          className="e8left-lmb-shrink"
          style={{ display: leftMenuMode == 'inline' ? 'block' : 'none' }}
          title={getLabel(20721, '收缩')}
          onClick={() => this.onModeChange('vertical')}
        />
        <div
          className="e8left-lmb-expand"
          style={{ display: leftMenuMode == 'vertical' ? 'block' : 'none' }}
          title={getLabel(15315, '展开')}
          onClick={() => this.onModeChange('inline')}
        />
      </div>
    );
  }

  onSelect(key, item, type) {
    window.isPortalRender = true;

    // type=0表示正常点击菜单，type=1表示点击菜单后面的图标
    const { portalThemeStore } = this.props;
    if (type == 1 && item.id == '536-53606') {
      // 邮件菜单，清空垃圾箱
      portalThemeStore.onClearEmail(item);
    } else if (type == 0 && (item.id === '536-53611' || item.id === '536-53610')) {
      // 我的文件夹和我的标签菜单不跳转路由
    } else {
      if (type == 1) {
        item.url = item.titleUrl;
      }
      portalThemeStore.onLeftMenuSelectedChange(item);
      portalThemeStore.onLoadMain(item);
    }
  }

  onModeChange(leftMenuMode) {
    const { portalThemeStore } = this.props;
    portalThemeStore.onLeftMenuModeChange(leftMenuMode);
  }
}

export default E8LeftMenu;
